document.addEventListener("DOMContentLoaded", function() {
    var $ = function(selector, element) {
        return (element || document).querySelector(selector);
    };
    var $$ = function(selector, element) {
        return (element || document).querySelectorAll(selector);
    };

    var transform = function(type, string) {
        string = string.replace(/\^(\d+)/g, "<sup>$1</sup>").replace(/\s/g, "");
        if (type === "integer") {
            return string.replace(/\*/g, " &times; ");
        } else {
            return string.replace(/\*/g, "");
        }
    };

    window.applicationCache.addEventListener("updateready", function() {
        if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
            window.location.reload();
        }
    }, false);

    $("nav > ul").addEventListener("click", function(event) {
        var target = event.target;
        if (target.nodeName.toLowerCase() !== "li" || target.classList.contains("active")) {
            return;
        }
        Array.prototype.forEach.call($$("nav > ul > li"), function(tab) {
            tab.classList.remove("active");
        });
        target.classList.add("active");
        $("main").dataset.current = target.getAttribute("for").slice(1);
    });

    var create_worker = function(section) {
        var worker = new Worker("factor.js");
        var output = $("output", section);
        var button = $("button", section);
        var toggle_button = $(".toggle-button", section);
        worker.addEventListener("message", function(event) {
            output.dataset.status = event.data.status;
            output.dataset.value = event.data.data;
            if (output.dataset.status === "success" && toggle_button.classList.contains("on")) {
                output.innerHTML = transform(section.id, output.dataset.value);
            } else {
                output.innerHTML = output.dataset.value;
            }
            button.textContent = "Factor!";
            button.dataset.action = "calculate";
        }, false);
        return worker;
    };

    Array.prototype.forEach.call($$("section"), function(section) {
        var output = $("output", section);
        output.dataset.status = "fail";
        output.dataset.value = "";
        $(".toggle-button", section).addEventListener("click", function() {
            this.classList.toggle("on");
            if (output.dataset.status === "success" && this.classList.contains("on")) {
                output.innerHTML = transform(section.id, output.dataset.value);
            } else {
                output.innerHTML = output.dataset.value;
            }
        }, false);
    });

    (function(section) {
        var worker = create_worker(section);
        $("button", section).addEventListener("click", function() {
            if (this.dataset.action === "calculate") {
                this.textContent = "Calculating...";
                this.dataset.action = "abort";
                worker.postMessage({
                    type: "integer",
                    number: $("input", section).value.trim()
                });
            } else {
                worker.terminate();
                worker = create_worker(section);
                $("button", section).textContent = "Factor!";
                $("button", section).dataset.action = "calculate";
            }
        }, false);
    })($("#integer"));

    (function(section) {
        var worker = create_worker(section);
        $("button", section).addEventListener("click", function() {
            if (this.dataset.action === "calculate") {
                this.textContent = "Calculating...";
                this.dataset.action = "abort";
                worker.postMessage({
                    type: "polynomial",
                    polynomial: $("input", section).value.trim(),
                    characteristic: $("sub", section).textContent.trim(),
                    symbol: $("span", section).textContent.trim()
                });
            } else {
                worker.terminate();
                worker = create_worker(section);
                $("button", section).textContent = "Factor!";
                $("button", section).dataset.action = "calculate";
            }
        }, false);
    })($("#polynomial"));
}, false);
